<template>
  <div class="recreation-container">
    <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item @click="lookImg(imgUrl)">
        <img :src="imgUrl" />
      </van-swipe-item>
      <template #indicator="{ active, total }" v-if="imgList.length > 1">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
      </template>
    </van-swipe> -->
    <myList
      @load="load"
      @refresh="refresh"
      v-model:refreshing="refreshing"
      v-model:loading="loading"
      :finished="finished"
      backTop="true"
    >
      <template #default>
        <!-- <van-cell center v-for="item in imgList" style="margin: 10px 0">
          <template #title>
           
          </template>
          132
        </van-cell> -->
        <div class="card" v-for="item in imgList">
          <div class="left">
            <van-image fit="cover" width="100%" height="100%" :src="item.url" />
          </div>
          <div class="right">{{item.title}}</div>
        </div>
      </template>
    </myList>
  </div>
</template>

<script setup>
import { imageList } from '@/api'
import myList from '@/components/my-list/index.vue'

const imgList = ref([])
const refreshing = ref(false)
const loading = ref(false)
const finished = ref(false)

const params = ref({
  page: 0,
  pageSize: 5,
  type: '',
})

const load = async () => {
  if (refreshing.value) {
    imgList.value = []
    refreshing.value = false
  }

  const { result } = await imageList(params.value)

  imgList.value.push(...result.list)

  loading.value = false

  if (imgList.value.length === result.total) {
    finished.value = true
  } else {
    params.value.page++
  }
}

const refresh = () => {
  finished.value = false
  loading.value = true
  load()
}

// const lookImg = (imgUrl) => {
//   showImagePreview([imgUrl])
// }
</script>

<style scoped lang="less">
.recreation-container {
  // .my-swipe {
  //   height: 200px;
  //   width: 94%;
  //   margin: 10px auto;
  //   border-radius: 5px;
  //   overflow: hidden;
  //   img {
  //     width: 100%;
  //     height: 100%;
  //     object-fit: cover;
  //   }
  //   .custom-indicator {
  //     position: absolute;
  //     right: 5px;
  //     bottom: 5px;
  //     padding: 2px 5px;
  //     font-size: 12px;
  //     background: rgba(0, 0, 0, 0.1);
  //   }
  // }
  .card {
    margin: 10px 0;
    padding: 10px;
    background-color: #fff;
    display: flex;
    .left {
      width: 80px;
      height: 80px;
      overflow: hidden;
      border-radius: 5px;
      background-color: pink;
      margin-right: 10px;
    }
  }
}
</style>
